<template>
  <baseCard
    :height="height"
    :title="'基础设施监控'"
    contentPadding="0.16rem 0.2rem"
    style="margin-right: 0; margin-left: 0; margin-bottom: 0.16rem"
  >
    <div class="sm-data-echarts-layout">
      <vptBaseMoniter v-bind="baseInfo" :deviceNum="deviceNum"></vptBaseMoniter>
    </div>
    <template v-slot:right>
      <vptSelect
        class="es-select-app"
        :label="'选择应用'"
        :value="defaultValue"
        :model="defaultValue"
        labelWidth="0.6rem"
        :width="1.8"
        :options="options"
        @change-tab="onChangeTab"
      ></vptSelect>
    </template>
  </baseCard>
</template>

<script setup>
import { computed, reactive } from "vue";
import BaseCard from "@/components/vpt-cards-1002/index.vue";
import vptSelect from "@/components/form/vpt-select/index.vue";
import vptBaseMoniter from "./components/vpt-base-moniter.vue";

const props = defineProps({
  defaultValue: { type: String },
  options: {
    typeof: Array,
    default: () => [],
  },
  baseInfo: { type: Object, default: () => ({}) },
  deviceNum: { type: Object, default: () => ({}) },
  height: { type: String, default: "7.63rem" },
});

// const optionsList = computed(() => {
//   return props.options.map((item) => ({
//     label: item.app_type,
//     value: item.app_type_code,
//   }));
// });

const onChangeTab = (value) => {
  emit("onChangeTab", value);
};

const emit = defineEmits(["onChangeTab"]);
</script>

<style lang="less" scoped>
.sm-data-echarts-layout {
  width: 100%;
  height: 100%;
}
</style>